<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>五车图书系统</title>
</head>
<style>
  [v-cloak] {
    display: none;
  }

</style>
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
  //var vConsole = new VConsole()
</script>

<body>
  <div id="body" style="height: 100%" v-cloak>


    <view-box ref="viewBox" body-padding-bottom="55px">
      <scroller style="top:0px" lock-x scrollbar-y height="-58" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
        <div>
          <myhead></myhead>
          <swiper :show-desc-mask='false' :aspect-ratio="300/800" :list="ADList" dots-position="center" auto loop></swiper>

          <div style="height: 190px;background-color: #FAFAFA;">
            <ul>
              <li>
                <div class="box1-item">
                  <a href="./had_to_borrow_books.html">
                    <div class="iconWapper">
                      <i class="iconfont icon-jieyueguanli"></i>
                    </div>
                    <p>我的借阅</p>
                  </a>
                </div>
              </li>

              <li>
                <div class="box1-item">
                  <a href="./reservation_books.html">
                    <div class="iconWapper">
                      <i class="iconfont icon-jieyuejilu"></i>
                    </div>
                    <p>我的预借</p>
                  </a>
                </div>
              </li>

              <li>
                <div class="box1-item">
                  <a href="./collection_books.html">
                    <div class="iconWapper">
                      <i class="iconfont icon-shoucang"></i>
                    </div>
                    <p>我的收藏</p>
                  </a>
                </div>
              </li>

              <li>
                <div class="box1-item">
                  <a href="./member_seeking_books.html">
                    <div class="iconWapper">
                      <i class="iconfont icon-qiuyi"></i>
                    </div>
                    <p>我想求书</p>
                  </a>
                </div>
              </li>

              <li>
                <div class="box1-item">
                  <a href="./borrow_bank.html">
                    <div class="iconWapper">
                      <i class="iconfont icon-paiming"></i>
                    </div>
                    <p>借阅排名</p>
                  </a>
                </div>
              </li>
              <li>
                <div class="box1-item">
                  <div class="iconWapper">
                    <i class="iconfont icon-huodong"></i>
                  </div>
                  <p>精彩活动</p>
                </div>
              </li>
              <li>
                <div class="box1-item">
                  <a href="./recommended_books.html">
                    <div class="iconWapper">
                      <svg class="icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-tuijian"></use>
                      </svg>
                    </div>
                    <p>新书推荐</p>
                  </a>
                </div>
              </li>

              <li>
                <div class="box1-item" @click=goRegister>
                  <a href="javascript:">
                    <div class="iconWapper">
                      <i class="iconfont icon-huiyuan1"></i>
                    </div>
                    <p>成为会员</p>
                  </a>
                </div>
              </li>
            </ul>
          </div>
          <div style="height:44px;">
            <sticky ref="sticky" :offset="46" :check-sticky-support="false">
              <tab :line-width="1">
                <tab-item @click.native='change(1)' selected>推荐图书
                </tab-item>
                <tab-item @click.native='change(2)' v-if='!!siteId'>{{siteName}}</tab-item>
                <tab-item @click.native='change(3)' v-if='!siteId'>登录后显示关联站点图书</tab-item>
              </tab>
            </sticky>
          </div>


          <div>
            <div class="bookList">
              <flexbox wrap="wrap" :gutter="0" align="flex-start">
                <flexbox-item :span="1/3" v-for="(item,index) in bookList">
                  <div class="book">
                    <a href="javascript:" @click='goDetail(item.id)'>
                      <div class="bookWrapper">
                        <div>
                          <img :src="item.cover" alt="" onerror="this.src='/static/book.jpg'">
                        </div>
                        <div class="detail">
                          <p class="title">{{item.name}}</p>
                          <p class="author">作者:{{item.author}}</p>
                        </div>
                      </div>
                    </a>
                  </div>
                </flexbox-item>
              </flexbox>

            </div>
          </div>
        </div>
        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'"
            :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <div v-if='stop' class="nomore">没有更多</div>
      </scroller>
      <foot :index="1"></foot>
    </view-box>
  </div>
</body>

</html>
